<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-自然拼读'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="0"> </RouterTabs>
        <view class="content">
          <view class="tabs">
            <u-tabs-swiper
              ref="uTabs"
              :list="list"
              :current="current"
              @change="tabsChange"
              :is-scroll="false"
              bg-color="transparent"
              inactive-color="#08A2D7"
              active-color="#1E75A2"
              :bar-style="styleObject"
              bar-width="134"
              bar-height="80"
            ></u-tabs-swiper>
          </view>
          <view class="letter">
            <swiper
              :current="swiperCurrent"
              @transition="transition"
              @animationfinish="animationfinish"
              style="width: 100%; height: 100%"
            >
              <swiper-item class="swiper-item" @touchmove.stop>
                <scroll-view
                  scroll-y
                  style="width: 100%; height: 100%"
                  @scrolltolower="onreachBottom"
                >
                  <LetterIdentification
                    v-if="current === 0"
                  ></LetterIdentification>
                </scroll-view>
              </swiper-item>
              <swiper-item class="swiper-item" @touchmove.stop>
                <scroll-view
                  scroll-y
                  style="width: 100%; height: 100%"
                  @scrolltolower="onreachBottom"
                >
                  <LetterStrengthen v-if="current === 1"></LetterStrengthen>
                </scroll-view>
              </swiper-item>
              <swiper-item class="swiper-item" @touchmove.stop>
                <scroll-view
                  scroll-y
                  style="width: 100%; height: 100%"
                  @scrolltolower="onreachBottom"
                >
                  <LetterITrain v-if="current === 2"></LetterITrain>
                </scroll-view>
              </swiper-item>
              <swiper-item class="swiper-item" @touchmove.stop>
                <scroll-view
                  scroll-y
                  style="width: 100%; height: 100%"
                  @scrolltolower="onreachBottom"
                >
                  <LetterGuidance
                    v-if="current === 3"
                    @play="playVideo"
                  ></LetterGuidance>
                </scroll-view>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
    </view>
    <u-popup
      v-model="show"
      :zoom="false"
      mode="center"
      width="640rpx"
      height="360rpx"
      @click="show = false"
    >
      <view class="video" @click.stop>
        <video :src="videoUrl" controls object-fit="fill"></video>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "练习字母",
          url: "pages/spelling/letter",
        },
        {
          name: "浅学音标",
          url: "pages/spelling/soundmarkShallow",
        },
        {
          name: "拼读训练",
          url: "pages/spelling/spellingTraining",
        },
        {
          name: "团灭音标",
          url: "pages/spelling/soundmarkAce",
        },
        {
          name: "暴击词汇",
          url: "pages/spelling/vocabulary",
        },
      ],
      list: [
        {
          name: "字母辨识",
        },
        {
          name: "字母强化",
        },
        {
          name: "字母训练",
        },
        {
          name: "书写指导",
        },
      ],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      styleObject: {
        background:
          "url('https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/tabs_bg.png') center/100% 100% no-repeat scroll",
        borderRadius: 0,
      },
      videoUrl: "",
      show: false,
    };
  },
  onLoad() {},
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
    playVideo(url, flag) {
      this.videoUrl = url;
      this.show = flag;
    },
    navigate(address) {
      uni.navigateTo({
        url: address,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./letter";
</style>
